<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .main {
            width: 1000px;
            height: 500px;
            margin: 50px auto;
            display: flex;
        }

        .left {
            width: 400px;
            height: 500px;
        }

        .right {
            width: 600px;
            height: 500px;
            padding: 20px;
            box-sizing: border-box;
        }

        .right div {
            margin: 20px 0;
        }

        .right .price .red {
            margin: 20px 0;
            border: 2px solid transparent;
        }

        .right .price .red.active {
            border: 2px solid red;
            color: red;
        }
    </style>
</head>

<body>
    <div class="main">
        <script type="text/html" id="temp">
            <img src="{{$data.img}}">
            <div class="right">
                <div style="font-size:20px;">【{{$data.city}}】{{$data.title}}</div>
                <div>时间：{{$data.time}}</div>
                <div>场馆：{{$data.city}} | {{$data.address}} </div>
                <div class="price">票档:
                    {{each $data.price item i}}
                    <button class="button button-tiny red {{i===0?'active':''}}">{{item}}</button>
                    {{/each}}
                </div>
                <div>数量: <button class="jia">+</button>
                    <input class="count" type="text" value="1" style="width:10px;">
                    <button class="jian">-</button>
                </div>
                <div>合计：$<span style="color:orchid;" class="totalPrice">288</span></div>
                <div>
                    <button class="button button-glow button-rounded button-caution">立即购买</button>
                </div>
            </div>
        </script>
    </div>
    <script src="js/conmmon.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="js/art-template.js"></script>
    <script>
        try {
            var id = location.search.split("=")[1]
            if (!id) {
                throw "参数有误"
            }
        } catch (error) {
            ad()
        }

        function ad() {
            location.href = "404.html"
            return false
        }
        $.ajax({
            url: "https://www.easy-mock.com/mock/5ce782b66224d87d8270a03a/rabbit123/detail-" + id,
            success: function (data) {
                if (data) {
                    $(".main").html(template("temp", data))
                    $("title").html(data.title + "-大麦网")
                } else {
                    location.href = "404.html"
                }
            },
            error: function (err) {
                location.href = "404.html"
            }
        })
        $(".main").on("click", ".button-tiny", function () {
            $(this).addClass("active").siblings(".active").removeClass("active")
            totalMoney()
        })
        $(".main").on("click", ".jian", function () {
            var count = parseInt($(".count").val())
            if (count === 1) return false
            else {
                $(".count").val(--count)
            }
            totalMoney()
        })
        $(".main").on("click", ".jia", function () {
            var count = parseInt($(".count").val())
            if (count === 6) return false
            else {
                $(".count").val(++count)
            }
            totalMoney()
        })
        $(".main").on("input", ".count", function () {
            if (!$(this).val()) $(this).val(1)
            if (isNaN($(this).val())) $(this).val(1)
            var count = parseInt($(this).val())
            if (count >= 6) $(this).val(6)
            if (count < 1) $(this).val(1)
            totalMoney()
        })

        function totalMoney() {
            var price = parseFloat($(".active").text())
            var count = parseInt($(".count").val())
            $(".totalPrice").text(price * count)
        }
    </script>
</body>

</html>